<template>
  <leftTabsItem tabs-name="shareEffect">
    <div class="share-effect-box">
      <div class="msg-list">
        <div v-for="(e, i) in msgList" :key="i" class="msg-item" :class="{self: e.isSelf}">
          <el-avatar v-if="!e.isSelf" shape="square" size="medium" src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png" style="margin-right: 10px;" />
          <div class="msg-content-box">
            <div style="font-weight: bold;font-size: 18px;margin-bottom: 10px;cursor: pointer;" @click="shareTitleInputShow = true">
              {{ e.title }}
              <div v-if="shareTitleInputShow || !e.title">
                <el-input v-model="shareTitleInputValue" placeholder="请输入分享标题" />
                <el-button type="success" style="margin-top: 10px;" @click.stop="onClickChangeTitle">分享标题输入完成</el-button>
              </div>
            </div>

            <div style="display: flex;justify-content: space-between;">
              <div style="color: #b9afbc;margin-right: 10px;cursor: pointer;" @click="shareContentInputShow = true">
                {{ e.content }}
                <div v-if="shareContentInputShow || !e.content">
                  <el-input v-model="shareContentInputValue" type="textarea" :rows="2" placeholder="请输入分享内容描述" />
                  <el-button type="success" style="margin-top: 10px;" @click.stop="onClickChangeContent">分享内容输入完成</el-button>
                </div>
              </div>
              <div style="width: 80px;height: 80px;border: 0px solid red; background-color: #eee;">
                <el-upload
                  style="border: 0px solid red;width: 80px;height: 80px;"
                  :show-file-list="false"
                  class="upload-demo"
                  :action="uploadurl"
                  :headers="{Authorization: 'Bearer ' + token }"
                  name="imgfile"
                  :on-success="onSuccess"
                >
                  <div style="border: 0px solid red;width: 80px;height: 80px;">
                    <img style="max-width: 80px;max-height: 80px;" :src="e.icon" alt="">
                  </div>
                </el-upload>
              </div>
            </div>
          </div>
          <el-avatar v-if="e.isSelf" shape="square" size="medium" src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png" style="margin-left: 10px;" />
        </div>
      </div>
      <div class="input-box">
        <img style="height: 30px;margin-right: 10px;" :src="yuyinImg" alt="">
        <el-input v-model="inputValue" placeholder="" />
        <img style="height: 30px;margin: 0 10px;" :src="biaoqingImg" alt="">
        <el-button v-if="inputValue" type="primary" size="mini">发送</el-button>
        <img v-else style="height: 30px;" :src="addImg" alt="">
      </div>
    </div>
  </leftTabsItem>
</template>

<script>
import leftTabsItem from '@/components/Task/leftTabsItem.vue'
import yuyinImg from '@/assets/images/yuyin.png'
import biaoqingImg from '@/assets/images/biaoqing.png'
import addImg from '@/assets/images/add.png'
import successIcon from '@/assets/images/success.png'
import { getToken } from '@/utils/auth'
import { mapState } from 'vuex'
import { cloneDeep } from 'lodash-es'

export default {
  components: { leftTabsItem },
  data() {
    return {
      shareTitleInputShow: false,
      shareTitleInputValue: '',
      shareContentInputShow: false,
      shareContentInputValue: '',
      uploadurl: process.env.VUE_APP_BASE_API + '/system/buzTask/uploadImg',
      token: getToken(),

      inputValue: '',
      yuyinImg: yuyinImg,
      biaoqingImg: biaoqingImg,
      addImg: addImg,

      defaultMsgList: [
        // {
        //   title: '标题1',
        //   content: '内容描述1',
        //   icon: successIcon,
        //   isSelf: false
        // },
        {
          title: '分享标题',
          content: '分享的内容描述',
          icon: successIcon,
          isSelf: true
        }
      ]
    }
  },
  computed: {
    ...mapState({
      appSetting: state => state.task.appSetting
    }),
    shareObj() {
      if (this.appSetting.shareEffect && this.appSetting.shareEffect.share) {
        return this.appSetting.shareEffect.share
      } else {
        return {
          title: '分享标题',
          content: '分享的内容描述',
          icon: successIcon
        }
      }
    },
    msgList() {
      return this.defaultMsgList.map(e => {
        e = { ...e, ...this.shareObj }
        return e
      })
    }
  },
  methods: {
    onClickChangeTitle() {
      if (!this.shareTitleInputValue) return false
      this.shareTitleInputShow = false
      this.changeShare({ title: this.shareTitleInputValue })
      this.shareTitleInputValue = ''
    },
    onClickChangeContent() {
      this.shareContentInputShow = false
      this.changeShare({ content: this.shareContentInputValue })
      this.shareContentInputValue = ''
    },
    onSuccess(res, file) {
      if (res.code === 200) {
        this.changeShare({ icon: res.imgUrl })
      } else {
        this.$message({
          type: 'error',
          message: res.msg
        })
      }
    },
    changeShare(obj) {
      console.log(obj, 'obj')
      const shareEffectSetting = cloneDeep(this.appSetting.shareEffect)
      if (!shareEffectSetting.share) {
        shareEffectSetting.share = this.shareObj
      }
      shareEffectSetting.share = { ...shareEffectSetting.share, ...obj }
      this.$store.commit('changeShareEffect', shareEffectSetting)
    }
  }
}
</script>

<style scoped lang="scss">
.share-effect-box{
  height: 100%;
  display: flex;
  flex-direction: column;

  .msg-list{
    flex: 1;
    overflow: auto;
    padding: 10px;

    .msg-item{
      margin-top: 20px;
      display: flex;

      &.self{
        justify-content: end;
      }

      .msg-content-box{
        flex: 1;
        background-color: #fff;
        border-radius: 5px;
        padding: 10px;

        .title{

        }

        .content{

        }

        .share-icon{

        }
      }
    }
  }

  .input-box{
    width: 100%;
    padding: 10px;
    background-color: #f5f5f6;
    display: flex;
    align-items: center;
  }
}

</style>
